<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <link href="../css/element.css" rel="stylesheet"/>
    <link href="../css/styleindex.css" rel="stylesheet"/>
    <style>
    .el-textarea .el-textarea__inner{
      border: 0;
      /*background-color: #e9e9e9;*/
    }
    </style>
</head>
<body style="background:#EFF0F4;">

  <div class="mui-content">
    <div id="vm" class="x-examok" v-cloak>
      <div class="x-header-g" id="header" v-show="!isfromindex">
        <a class="x-header-arrow" @click="api.closeWin()"></a>
        <div class="x-header-t">工作台-办理离职</div>
      </div>
      <div id="viewcan">
        <!-- 员工资料 -->
        <div class="x-pro-list">
          <div class="x-pro-top">员工资料</div>
          <div class="x-pro-pro">
            <div class="x-pro-left">
              <div class="x-pro-row">
                <div class="x-pro-label">姓名:</div>
                <div class="x-pro-input">
                  {{input1}}
                </div>
              </div>
              <div class="x-pro-row" v-if="istype==1">
                <div class="x-pro-label">部门:</div>
                <div class="x-pro-input">
                  {{input3}}
                </div>
              </div>
              <div class="x-pro-row" v-else>
                <div class="x-pro-label">店面:</div>
                <div class="x-pro-input">
                  {{input3}}
                </div>
              </div>
              <div class="x-pro-row">
                <div class="x-pro-label">电话:</div>
                <div class="x-pro-input">
                  {{input5}}
                </div>
              </div>
            </div>
            <div class="x-pro-right">
              <div class="x-pro-himg" :style="{'background-image':'url(' +input4+ ')','background-size':'cover','width':'4.5rem','height':'6rem','border-radius':'0.4rem','margin-bottom':'0.6rem'}" v-if="input4!=''"></div>
              <div class="x-pro-himg" v-else></div>
              <div class="x-pro-sbtn" @click="imgPer" v-show="!isfromindex">添加照片</div>
            </div>
          </div>
        </div>
        <!-- 办理离职 -->
        <div class="x-pro-list">
            <el-collapse v-model="activeNames3">
              <el-collapse-item title="办理离职" name="1">
                <div class="x-pro-pro2">
                  <div class="x-pro-row">
                    <div class="x-pro-label">离职时间</div>
                    <div class="x-pro-input">
                      <el-date-picker v-model="leavedate" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" :disabled="isfromindex" :editable="notkey"></el-date-picker>
                    </div>
                  </div>
                  <div class="x-pro-row">
                    <div class="x-pro-label">离职原因</div>
                    <div class="x-pro-input">
                      <el-input placeholder="请输入内容" v-model="leaveanswer" :disabled="isfromindex" type="textarea" :rows="2"></el-input>
                    </div>
                  </div>
                  <div class="x-pro-row">
                    <div class="x-pro-label">审批人</div>
                    <div class="x-pro-input">
                      <el-select v-model="leaveperson" placeholder="请选择" @change="seepp" :disabled="isfromindex">
                        <el-option v-for="item in leavepersondata" :key="item.id" :label="item.username" :value="item.id"></el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="x-pro-bb" v-for="(item,index) in leaveupload" :key="item.key">

                    <div class="x-pro-row">
                      <div class="x-pro-label">上交物品</div>
                      <div class="x-pro-input">
                        <el-input placeholder="请输入内容" v-model="item.title" :disabled="isfromindex" type="textarea" :rows="2"></el-input>
                      </div>
                    </div>
                    <div class="x-pro-remove" @click="removeleaveupload(index)" v-show="!isfromindex">删除</div>
                  </div>
                  <div class="x-pro-addbox" @click="goonleave" v-show="!isfromindex"><span class="x-pro-addicon"></span>继续添加</div>
                  <div class="x-pro-row">
                    <div class="x-pro-label">入职物品</div>
                    <div class="x-pro-input x-pro-inshow">
                      <el-input placeholder="" v-model="leaveenterpro" :disabled="isdisabled"></el-input>
                    </div>
                  </div>
                  <div class="x-pro-row">
                    <div class="x-pro-label">办理人</div>
                    <div class="x-pro-input">
                      <el-select v-model="leavepersontake" placeholder="请选择" @change="seepp" :disabled="isfromindex">
                        <el-option v-for="item in leavepersondata" :key="item.id" :label="item.username" :value="item.id"></el-option>
                      </el-select>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
        </div>
      </div>

      <!--  -->
      <div class="x-pro-gobtn" @click="isok" v-show="!isfromindex">提交</div>
      <div @click="getcanvas" class="x-pro-gobtn" v-show="isfromindex">保存到相册</div>
    </div>
  </div>

  <script type="text/javascript" src="../script/vue.js"></script>
  <script type="text/javascript" src="../script/element.js"></script>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/base.js"></script>
  <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
  <script type="text/javascript" src="../script/canvas2image.js"></script>
	<script>
apiready = function () {
    var tid = api.pageParam.id;
    var tidonlysee = api.pageParam.isonlysee;//是否只读
    $api.fixStatusBar($api.byId('header'));

    //
    var vm = new Vue({
      el:'#vm',
      data(){
        return{
          thproid:'',
          //
          input1:'',
          input3:'',
          input5:'',
          input4:'',
          istype:'',
          //
          activeNames3: ['1'],
          leavedate:'',
          leaveanswer:'',
          isfromindex:false,
          leaveperson:'',
          leavepersondata:[],
          leaveupload:[{
            'title':'',
            'index':0
          }],
          leaveindex:0,
          leaveenterpro:'',
          leaveenterproarray:[],
          //
          isdisabled:true,
          leavepersontake:'',//办理人
          thidonlysee:false,
          notkey:false,

        }
      },
      created:function() {
        var that=this;


      },
      mounted:function(){
        var that=this;
        that.thproid = tid;//id

        that.thidonlysee = tidonlysee;//只读
        if(that.thidonlysee){//来自只读
          that.isfromindex = true;
        }

        that.getpersondata()
        that.backshow()//回显

      },
      methods: {
        //
        getcanvas:function(){
          var that = this;
          //解决安卓截图不全
          window.pageYoffset = 0;
          document.documentElement.scrollTop = 0;
          document.body.scrollTop = 0;
          api.showProgress();
          html2canvas(document.getElementById('viewcan'), {
             onrendered: function(canvas) {
                var seev = canvas.toDataURL('image/png', 1.0);
                var baseimgdata = seev.split(',')[1];
                that.basetoimg(baseimgdata);
              },
           });
        },
        //base64转图片
        basetoimg:function(base){
          var img_name = new Date().getTime()+'.png';
          var trans = api.require('trans');
          trans.saveImage({
              base64Str: base,
              album:true,
              imgPath:"fs://",
              imgName:img_name
          }, function(ret, err) {
              if (ret.status) {
                  api.hideProgress();
                  api.toast({
                      msg: '保存成功',
                      duration: 3000,
                      location: 'bottom'
                  });
              } else {
                api.hideProgress();
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
          });
        },
        //回显
        backshow:function(){
          let that=this;
          api.ajax({
            url:baseurl+'api/person/leave',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken'),
                id:that.thproid,
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              console.log(JSON.stringify(ret));
              if(ret.status == 1){
                that.input1 = ret.data.info.username;
                that.input3 = ret.data.info.shop;
                that.input5 = ret.data.info.phone;
                that.input4 = ret.data.info.avatar;
                that.istype = ret.data.info.type;

                for(var i=0;i<ret.data.data.entry_materiel.length;i++){
                  that.leaveenterproarray.push(ret.data.data.entry_materiel[i].title);
                }
                that.leaveenterpro = that.leaveenterproarray
                //
                that.leavedate = ret.data.data.in_date;
                that.leaveanswer = ret.data.data.cause;
                that.leaveperson = ret.data.data.check_memberid;

                setTimeout(function(){
                  if(ret.data.data.leave_materiel!=''&&ret.data.data.leave_materiel!=undefined){
                    that.leaveupload = ret.data.data.leave_materiel;
                  }
                },500)

                that.leavepersontake = ret.data.data.hr_memberid;


              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
        //提交
        isok:function(){
          var that = this;
          api.ajax({
            url:baseurl+'api/person/leaveEdit',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken'),
                id:that.thproid,
                in_date:that.leavedate,
                cause:that.leaveanswer,
                check_memberid:that.leaveperson,
                materiel_json:that.leaveupload,
                hr_memberid:that.leavepersontake
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              console.log(JSON.stringify(ret));
              if(ret.status == 1){
                api.confirm({
                    title: '保存成功',
                    msg: '',
                    buttons: ['继续编辑', '返回']
                }, function(ret, err) {
                    var index = ret.buttonIndex;
                    if(index=='1'){

                    }else{
                      api.closeWin({});

                    }
                });

              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
        //继续添加
        goonleave:function(){
          var that = this;
          that.leaveindex++
          that.leaveupload.push({
            'title':'',
            'index':that.leaveindex,
          });
        },
        //删除
        removeleaveupload:function(index){
          let that = this;
          var nowin = index;
          console.log(JSON.stringify(that.leaveupload));
          api.confirm({
            title: '操作提示',
            msg: '确定要删除吗？',
            buttons: ['确定','取消']
          }, function(ret, err) {
            var index = ret.buttonIndex;
            if(index == 1){
              //删除
              that.leaveupload.splice(nowin,1);//删除全部数组中对应的值
              console.log(JSON.stringify(that.leaveupload));
            }
          });
        },
        //下拉框
        seepp:function(val){
          var that = this;
          console.log(val);
        },
        //人
        getpersondata:function(){
          let that=this;
          // console.log(that.thproid);
          api.ajax({
            url:baseurl+'api/person/employee',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken'),
                id:that.thproid
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              console.log(JSON.stringify(ret));
              if(ret.status == 1){
                that.leavepersondata = ret.data.list;

              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
        //头像
        // 判断相机权限
        imgPer:function(){
          let that =this;
          var resultList = api.hasPermission({
              list:['camera','storage','photos']
          });
          if(!resultList[0].granted || !resultList[1].granted || !resultList[2].granted){
            // 没有权限
            that.reqPer()
          }else{
            // 有权限
            that.openpic()
          }
        },
        // 再请求
        reqPer:function(){
          let that =this;
          // 没有权限
          api.requestPermission({
              list:['camera','storage','photos'],
              code:1
          }, function(ret, err){
              if(ret.list[0].granted && ret.list[1].granted && ret.list[2].granted){
                // 允许
                that.openpic()
              }else{
                // 禁止
                that.noPer()
              }
              // 不再提醒
              if(ret.never){

              }
          });
        },
        // 禁止
        noPer:function(){
          let that =this;
          api.confirm({
            title: '提醒',
            msg: '没有获得 ' + '相机' + " 权限\n是否前往设置？",
            buttons: ['去设置', '取消']
          }, function(ret, err) {
            if(1 == ret.buttonIndex){
              that.reqPer();
            }
          });
        },
        //调起相机
        openpic:function(){
          let that =this;
          api.actionSheet({
              cancelTitle: '取消',
              buttons: ['相机', '相册']
          }, function(ret, err) {
              var tindex = ret.buttonIndex;
              if(tindex==1){//相机
                that.choicepic('camera')
              }else if(tindex==2){//相机
                that.choicepic('album')
              }
          });
        },
        //图片he视频上传
        choicepic:function(type){
          let that =this;
          api.getPicture({
            sourceType: type,
            encodingType: 'jpg',
            mediaValue: 'pic',
            destinationType: 'url',
            allowEdit: true,
            preview:true,
            quality: 50,
            saveToPhotoAlbum: true,
            groupName:'餐众邦'
          }, function(ret, err) {
            api.showProgress();
            if (ret) {
                console.log(JSON.stringify(ret));
                api.ajax({
                    url: baseurl+'upload/oss',
                    method: 'post',
                    data: {
                      values: {
                        "sec":$api.getStorage('apptoken'),
                      },
                      files: {
                        "file": ret.data
                      }
                    }
                }, function(ret, err) {
                  console.log(JSON.stringify(ret));
                  console.log(JSON.stringify(err));
                  api.hideProgress();
                  if(ret.status==1){
                    api.hideProgress();
                    // that.uploadvideo(ret.data[0].url)
                    that.input4 = ret.data[0].url;
                    console.log(that.input4);


                  }else{
                    api.hideProgress();
                    api.toast({
                        msg: '上传失败，请重新选择',
                        duration: 3000,
                        location: 'bottom'
                    });
                  }
                });
            } else {
                api.hideProgress();
                console.log(JSON.stringify(err));
                api.toast({
                    msg: '上传失败，请重新选择',
                    duration: 3000,
                    location: 'bottom'
                });
            }
          });
        },
      }
    })
	}


	</script>
</body>
</html>
